
// flex 布局：左右，上下，方向，换行
@mixin flex( $justify: flex-start, $aline: flex-start, $direction: row, $wrap: nowrap) {
  display: flex;

  justify-content: $justify;  // 左右  flex-start | flex-end | center | space-between | space-around
  align-items: $aline;   // 上下 flex-start | flex-end | center | baseline | stretch;
  flex-direction: $direction;  // 方向  row | row-reverse | column | column-reverse;
  flex-wrap: $wrap;  // 换行   nowrap | wrap | wrap-reverse

}

// 单行溢出 ...
@mixin single-ellipsis(){
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

// 多行文本溢出 ...
@mixin multi-ellipsis($line:2){
  overflow : hidden;
  word-break: break-all;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: $line;
  -webkit-box-orient: vertical;
}

// 毛玻璃特效
@mixin blur($blur: 10px) {
  -webkit-filter: blur($blur);
  -moz-filter: blur($blur);
  -o-filter: blur($blur);
  -ms-filter: blur($blur);
  filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius='${blur}');
  filter: blur($blur);
  *zoom: 1;
}

// 文本 行高+居中
@mixin font-aline($height: 100%, $aline: left){
  height: $height;
  line-height: $height;
  text-align: $aline
}

// 不可选中
@mixin no-select($user: none, $event: none){
  user-select: none;
  pointer-events: none;
}


@mixin fixed {
  position: fixed;
  *zoom: 1;
}
// 吸顶导航
@mixin fix-header($h: 70px) {
  @include fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: $h;
  z-index: 1000;
}

// 吸底导航
@mixin fix-footer($h: 70px) {
  // 设置元素为fixed定位
  @include fixed;
  // 设置元素的left属性为0
  left: 0;
  // 设置元素的bottom属性为0
  bottom: 0;
  // 设置元素的width属性为100%
  width: 100%;
  // 设置元素的height属性为$h
  height: $h;
  // 设置元素的z-index属性为1000
  z-index: 1000;
}

// 尺寸
@mixin size($w: 100%, $h: 100%) {
  width: $w;
  height: $h;
}

// 最小尺寸, 兼容IE6
@mixin min-size($min-w:100%, $min-h: 100%) {
  min-width: $min-w;
  min-height: $min-h;
}

@mixin linear-gradient($to: to right bottom, $color1: #f902ff, $color2: #00dbde){
  background-image: linear-gradient($to, $color1, $color2);
}